<template>
  <v-main class="full-height">
    <v-app-bar
        flat
        fixed
        align="center"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="3" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3" >
              <v-icon color="lighten-1" >mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="6">
            <div class="mt-3">
              消息列表
            </div>
          </v-col>
          <v-col cols="3" class="text-right pr-0 pt-5">
            <v-menu offset-y >
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                    small
                    icon
                    v-bind="attrs"
                    v-on="on"
                >
                  <v-icon class="lighten-4">mdi-dots-vertical</v-icon>
                </v-btn>
              </template>
              <v-list dense>
                <v-list-item dense>
                  <v-list-item-title @click="readAllMessage">已读全部</v-list-item-title>
                </v-list-item>
                <v-list-item dense >
                  <v-list-item-title class="red--text" @click="deleteAllMessage">删除全部</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>

    <v-container class="mt-15">
      <v-row justify="center" v-for="(item,index) in messages" :key="index">
        <v-col cols="12" class="text-center pb-0">
          <div class="text-caption lighten-2">{{myDateFormat(item.createTime)}}</div>
        </v-col>
        <v-col cols="12" @click="$router.push(`/message/${item.mid}`)">
          <v-card>

            <v-card-title class="text-body-1 mb-2 ">
              <v-badge
                  color="red"
                  dot
                  :value="item.readStatus===1"
              >
                {{item.title}}
              </v-badge>
            </v-card-title>

            <v-card-subtitle style="height:2rem;" class="overflow-hidden text-truncate" v-text="pureText(preProcessContent(item.content))">

            </v-card-subtitle>
          </v-card>
        </v-col>

      </v-row>
      <v-card-subtitle v-if="!(messages.length||loadingMessages)" class="text-center">没有消息哦</v-card-subtitle>
      <load-more :loading="loadingMessages" v-if="hasMoreMessage" @onLoadMore="loadMoreMessages"></load-more>
    </v-container>
  </v-main>
</template>

<script>
import LoadMore from "../components/LoadMore";
import {myDateFormat, printMsg, b64_to_utf8} from "../util/util";

export default {
  name: "Messages",
  components:{LoadMore},
  data:()=>({
    loadingMessages:false,
    hasMoreMessage:true,
    messageContent:'',
    messages:[],
    messagePage:{
      page:0,
      row:5
    }
  }),
  mounted() {
    this.loadMoreMessages()
  },
  methods:{
    myDateFormat,
    loadMoreMessages(){
      this.loadingMessages = true
      let data = {
        toUid: this.$store.state.uid,
        page:1,
        row:(this.messagePage.page+=1)*this.messagePage.row
      }
      this.$http.post('message/listMessages',data).then(res => {
        this.messages = res.data || []
        if(this.messages){
          this.messages.map(a=>a.content = b64_to_utf8(a.content))
        }
        this.hasMoreMessage = ! (this.messages.length === res.total)
        this.loadingMessages = false
      }).catch(res => {
        this.$emit("toast", res.msg)
        this.loadingMessages = false
      })
    },
    preProcessContent(str){
      let reg = /<a href="(.*?)".*?>(.*?)<\/a>/
      let res = reg.exec(str)
      if (res){
        printMsg(reg.exec(str),this,'匹配到的地址')
        str = str.replace(res[0],`<a href="${res[1]}">${res[2]}</a>`)
        printMsg(str,this,'匹配完成的地址')
      }
      return str
    },
    pureText(str){
      let div = document.createElement("div")
      div.innerHTML = str
      // printMsg(div.textContent,this,'文本内容textContent')
      printMsg(div.innerText,this,'文本内容innerText')

      return div.innerText
    },
    readAllMessage(){
      let data ={
        toUid: this.$store.state.uid,
      }
      this.$http.post('message/readAllMessage',data).then(res => {
        this.loadMoreMessages()
        this.$emit("toast", "已读全部成功")
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    deleteAllMessage(){
      let data ={
        toUid: this.$store.state.uid,
      }
      this.$http.post('message/deleteAllMessage',data).then(res => {
        this.loadMoreMessages()
        this.$emit("toast", "删除全部成功")
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },

  }
}
</script>

<style scoped>

</style>
